<div class="blog-card">
  <div class="content">
    <div class="header">
      <div class="origin float-left bg-success text-white rounded px-2 py-1 mt-1 font-weight-normal" data-tooltip="原创">原</div>
      <a class="text-dark ml-2 font-weight-bold" href="/blog/{{blogArticleCard.articleId}}" target="_blank">
        {{blogArticleCard.articleName}}
      </a>
    </div>
    <div class="description mt-2">
      <span class="">{{blogArticleCard.articleDescription}}</span>
    </div>
    <div class="extend">
      <div class="py-2">
        <div class="d-inline mr-3">
          <a class="text-secondary">{{blogArticleCard.articleCategory}}</a>
        </div>
        <div class="d-inline mr-3">
          <fa-icon [icon]="['fas', 'eye']"></fa-icon> {{blogArticleCard.articleClick}}
        </div>
        <div class="d-inline mr-3">
          <a class="text-secondary" href="/blog/edit/{{blogArticleCard.articleId}}" target="_blank">
            <fa-icon [icon]="['fas', 'comment-alt']"></fa-icon> {{blogArticleCard.articleCommentCount}}
          </a>
        </div>
        <div class="d-inline mr-3">{{blogArticleCard.articleTime}}</div>
        <div class="d-inline mr-3">
          <a class="text-secondary" href="/blog/edit/{{blogArticleCard.articleId}}">
            <fa-icon [icon]="['fas', 'edit']"></fa-icon> 编辑
          </a>
        </div>
        <div class="d-inline mr-3">
          <a class="text-secondary" href="#"  data-toggle="modal"
            data-target="#deleteBlogArticle">
            <fa-icon [icon]="['fas', 'trash-alt']"></fa-icon> 删除
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- deleteBlogArticle -->
<div class="modal" id="deleteBlogArticle" tabindex="-1" role="dialog" aria-labelledby="deleteBlogArticleLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteBlogArticleLabel">删除文章</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        文章删除后无法恢复，确定删除吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-danger" (click)="deleteBlogArticle()">确定</button>
      </div>
    </div>
  </div>
</div>